<template>
    <div class="catelist-box">
        <van-nav-bar title="分类" left-text="返回" left-arrow @click-left="$router.back()" />
        <van-tabs v-model:active="active">
            <van-tab :title="item.name" v-for="item in catelist ">
                <div class="cate-list" v-if="cateListGoods?.length != 0">
                    <div v-for="item in cateListGoods" class="cate-list-item"
                        @click="$router.push({ name: 'detiall', params: { id: item.id } })">
                        <img :src="item.list_pic_url" alt="" style="width: 175px; height: 175px; background-color: #fff;">
                        <div>{{ item.name }}</div>
                        <div style="color: #9e4242; margin: 10px 0;">￥ {{ item.retail_price }}</div>
                    </div>
                </div>
                <div v-else class="cate-list2">
                    数据库暂时没有数据...
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getcateNavApi, getcategoodsListListApi } from '@/api/cate'
import { useRoute } from 'vue-router'
import { watch } from 'vue';

// 定义一个变量，表示导航数据
const catelist = ref<CateNs.ICateNavData[]>([])
// 定义一个变量表示商品
const cateListGoods = ref<CateNs.IcategoodsList[]>()
// 获取id
const route = useRoute()
const active = ref<number>(0)
// 获取商品列表的方法
const getcategoodsList = async (id: string) => {
    const info = await getcategoodsListListApi(id)
    // if (info.data.length = 0) {
    //     cateListGoods.value = '数据库暂无数据'
    // }
    cateListGoods.value = info.data
}

const getcateNav = async (id: string) => {
    // 获取导航数据的方法
    const res = await getcateNavApi(id)
    // 将获取的数据赋值
    catelist.value = res.navData
    // 利用路由上的id找到对应的索引赋值给active
    active.value = catelist.value.findIndex((item) => {
        return item.id == (route.query.id as unknown as number)
    })
    // 根据索引获取对应的id
    getcategoodsList(catelist.value[active.value]?.id as unknown as string)
}

watch(() => active.value, () => {
    getcategoodsList(catelist.value[active.value]?.id as unknown as string)
})
//导航数据上来就要获取
onMounted(() => {
    getcateNav(route.query.id as string)
})
</script>

<style scoped lang-="scss">
.cate-list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 8px;
}

.cate-list2 {
    margin-top: 100px;
    text-align: center;
    font-size: 20px;
    color: #616161;
}
</style>